<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
		<title>我的</title>
		<link href="../../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
		<link href="../../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">
		<link href="../../css/personal.css" rel="stylesheet" type="text/css">
		<link href="../../css/colstyle.css" rel="stylesheet" type="text/css">
		<link href="../../js/easyUpload/easy-upload.css" rel="stylesheet" type="text/css"/>
		<script src="../../AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
		<script src="../../AmazeUI-2.4.2/assets/js/amazeui.min.js"></script>
		<script type="text/javascript" src="../../js/common.js"></script>
		<script src="../../js/easyUpload/vendor/jquery.cookie-1.4.1.min.js"></script>
		<script src="../../js/easyUpload/easyUpload.js"></script>
	</head>

	<body>
		<!--头 -->
		<header>
			<article>
				<div class="mt-logo">
					<!--顶部导航条 -->
					<div class="am-container header">
						<ul class="message-l">
							<div class="topMessage">
								<div class="menu-hd" id="indexHeader">
								</div>
							</div>
						</ul>
						</div>
					</div>
				</div>
			</article>
		</header>
		<div class="center" style="margin-bottom: 30px;;">
			<div class="col-main">
				<div class="main-wrap">
					<div class="user-collection">
						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">上传商品</strong></div>
						</div>
						<hr/>
						<div style="margin: 20px;font-size: 20px;">
							
								<div style="margin: 20px;font-size: 20px;">
									<label>商品名称：</label>
									<input type="text" name="goodsname" id="goodsname"/>
								</div>
								<div style="margin: 20px;font-size: 15px;">
									<label>商品类别：</label>
									<select id="goodstype" name="goodstype"></select>
								</div>
								<div style="margin: 20px;font-size: 20px;">
									<label>商品价格：</label>
									<input type="number" name="goodsprice" id="goodsprice"/>
								</div>
								<div style="margin: 20px;font-size: 20px;">
									<label>商品库存：</label>
									<input type="number" name="goodsinventory" id="goodsinventory"/>
								</div>
								<div style="margin: 20px;font-size: 15px;">
									<label style="float:left">商品详情：</label>
									<textarea id="goodsdetail" style="width: 500px;height: 300px;"></textarea>
								</div>
								<div style="margin: 20px;font-size: 20px;">
									<label style="float:none">商品图片：</label>
									<div style="float:none" id="easyContainer"></div>
								</div>
								<div style="margin: 20px;font-size: 20px;">
									<button onClick="uploadGoodss()">提交</button>
								</div>
								<input type="hidden" id="img"/>
							
						</div>
					</div>
				</div>
			</div>

			<aside class="menu">
				<ul>
					<li class="person active">
						<a href="index.html">个人中心</a>
					</li>
					<li class="person">
						<a href="#">个人资料</a>
						<ul>
							<li>
								<a href="information.html">信息管理</a>
							</li>
						</ul>
					</li>
					<li class="person">
						<a href="#">我的交易</a>
						<ul>
							<li>
								<a href="order.html">买入订单</a>
							</li>
							<li>
								<a href="sellorder.html">卖出订单</a>
							</li>
						</ul>
					</li>
					<li class="person">
						<a href="#">我的资产</a>
						<ul>
							<li>
								<a href="collection.html">正在出售</a>
							</li>
							<li>
								<a href="upload.html">上传商品</a>
							</li>
						</ul>
					</li>
				</ul>
			</aside>
		</div>
		
		
		<script>
			$(function(){
				/*检验用户是否登录*/
				if (getCookie("username") == null || getCookie("userid") == null) {
                    window.location.href="../login.html";
                    return;
			    }else{
			    	$("#indexHeader").append(`
                            <a href="#" target="_top" class="h">您好，${getCookie("username")}</a>
                            <a href="javascript:void(0);" onclick="clearCookie()">退出</a>`
                    );
			    }
			    
			    /*初始化商品类别下拉框*/
				$.ajax({
					type:"get",
					url:"/goodstype/allChildType",
					async:true,
					success:function (result) {
						for(var i=0;i<result.data.length;i++){
                		  $("#goodstype").append(`<option value="${result.data[i].id}">${result.data[i].typename}</option>`);
                	 	}
					}
				});
			    
			    /*初始化图片上传*/
			    $('#easyContainer').easyUpload({
					  allowFileTypes: '*.jpg;*.png;*.gif;*.jpeg',//允许上传文件类型
					  allowFileSize: 100000,//允许上传文件大小(KB)
					  selectText: '选择文件',//选择文件按钮文案
					  multi: true,//是否允许多文件上传
					  multiNum: 3,//多文件上传时允许的文件数
					  showNote: true,//是否展示文件上传说明
					  note: '提示：最多上传3张图片,图片格式为jpg/png/gif/jpeg',//文件上传说明
					  showPreview: true,//是否显示文件预览
					  url: '/upload/picture',//上传文件地址
					  fileName: 'file',//文件filename配置参数
					  formParam: {
					    //token: $.cookie('token_cookie')//不需要验证token时可以去掉
					  },//文件filename以外的配置参数，格式：{key1:value1,key2:value2}
					  timeout: 30000,//请求超时时间
					  /** 响应格式
					   *  {
					   *    "success": [
					   *        {
					   *             "code": 200,
					   *           "data": "/uploadPic/06763e0c-55b3-4c10-8b79-8591c0fe601c.jpg",
					   *             "easyFileIndex": 0
					   *        },
					   *       {
					   *            "code": 200,
					   *            "data": "/uploadPic/b2653fe4-1365-4a67-82b8-b0bdac8f17ef.jpg",
					   *           "easyFileIndex": 1
					   *        }
					   *    ],
					   *    "error": []
				       * }
					   * 
					   */
					  successFunc: function(res) {
					    console.log('成功回调', res);
					    var dataList=res.success;
				    	$("#img").val(JSON.stringify(dataList));//存储到隐藏域
					  },//上传成功回调函数
					  errorFunc: function(res) {
					    console.log('失败回调', res);
					  },//上传失败回调函数
					  deleteFunc: function(res) {
					    console.log('删除回调', res);
					    
					  }//删除文件回调函数
				});
			});
		</script>
		<script>
			/**
			 * 提交数据
			 */
			function uploadGoodss(){
				var goodsname=$("#goodsname").val();
				var goodstype=$("#goodstype").val();
				var goodsprice=$("#goodsprice").val();
				var goodsinventory=$("#goodsinventory").val();
				var goodsdetail=$("#goodsdetail").val();
				var userid=getCookie("userid");
				//TODO 解析图片url
				var imgurls=$("#img").val();
				var imgData=JSON.parse(imgurls);
				var d;
				if(imgData.length==1){
					d={"goodsname":goodsname,"typeid":goodstype,
				      "status":0,"userid":userid,"price":goodsprice,
				      "details":goodsdetail,"inventory":goodsinventory,"img1":imgData[0].data};
				}
				if(imgData.length==2){
					 d={"goodsname":goodsname,"typeid":goodstype,
				      "status":0,"userid":userid,"price":goodsprice,
				      "details":goodsdetail,"inventory":goodsinventory,
				      "img1":imgData[0].data,
				      "img2":imgData[1].data};
				}
				if(imgData.length==3){
					 d={"goodsname":goodsname,"typeid":goodstype,
				      "status":0,"userid":userid,"price":goodsprice,
				      "details":goodsdetail,"inventory":goodsinventory,
				      "img1":imgData[0].data,
				      "img2":imgData[1].data,
					  "img3":imgData[2].data};
				}
				$.ajax({
					type:"post",
					url:"/goods/insert",
					async:true,
					data:JSON.stringify(d),
					contentType:"application/json; charset=utf-8",
					dataType: "json",
					success:function(result){
						alert("提交成功，等待审核！");
						window.location.href="collection.html";
					}
				});
			}
		</script>
	</body>

</html>